<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			font-weight: 300;
			background-color: #ecf0f3;
		}

		.label {
			display: inline-flex;
			align-items: center;
			cursor: pointer;
			color: #394a56;
		}

		.label-text {
			margin-left: 16px;
			transform: rotateY(-180deg);
			font-size: 28px;
			font-weight: 600;
			transition: 3s;
		}
			
		.label-text:hover{
			transition: 3s;
			transform: rotateY(-360deg);
		}

		.switch {
			isolation: isolate;
			position: relative;
			height: 50px;
			width: 100px;
			border-radius: 25px;
			overflow: hidden;
			box-shadow:
				-8px -4px 8px 0px #ffffff,
				8px 4px 12px 0px #d1d9e6,
				4px 4px 4px 0px #d1d9e6 inset,
				-4px -4px 4px 0px #ffffff inset;
		}

		.switch-state {
			display: none;
		}

		.dots {
			height: 100%;
			width: 200%;
			background: #dbdcf3;
			border-radius: 25px;
			transform: translate3d(-75%, 0, 0);
			transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
			box-shadow:
				-8px -4px 8px 0px #ffffff,
				8px 4px 12px 0px #d1d9e6;
		}

		.switch-state:checked~.dots {
			transform: translate3d(25%, 0, 0);
		}
	</style>
	<body>
		<label class="label">
			<div class="switch">
				<input class="switch-state" type="checkbox" name="check" value="check" />
				<div class="dots"></div>
			</div>
			<div class="label-text">OFF/ON</div>
		</label>
	</body>
</html>
